<template>
	<text class="title">请客观真实的评价哦~</text>
	<view class="starts">
		<image :src="index<=form.score ?'../../static/start-act.png':'../../static/start.png'" v-for="(item,index) in 5"
			:key="index" @click="onStart(index)"></image>
	</view>
	<view class="box">
		<textarea placeholder="请输入~" v-model="form.content" maxlength="30" placeholder-style="color:#A5A5A5"></textarea>
		<text class="num">限30字</text>
		<view class="uploads">
			<image :src="item" v-for="(item,index) in images" :key="index" @click="showShell(index)" class="upload" mode=""></image>
			<image src="../../static/upload.png" @click="uploadImg" v-if="images.length<3" class="upload" mode=""></image>
		</view>
	</view>
	<button class="btn" @click="submit">提交评价</button>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		evaluateSave
	} from '@/api'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		upload
	} from '@/utils/login-sdk.js'
	const images = ref([])
	const form = ref({
		"memberId": '', //会员ID
		"content": "", //内容
		"storeId": '', //店铺ID
		"productInfoId": '', //商品信息ID
		"orderId": '', //订单ID
		"preOrderId": '', //预支付订单ID
		"score": 5, //分数
		"picUrl": "" //图片URL，多张图片按逗号分隔
	})
	onLoad((params) => {
		form.value.memberId = params.memberId
		form.value.storeId = params.storeId
		form.value.productInfoId = params.productInfoId
		form.value.orderId = params.orderId
		form.value.preOrderId = params.preOrderId
	})
	/** 评分 */
	const onStart = (index) => {
		form.value.score = index
	}
	/** 上传图片 */
	const uploadImg = () => {
		if(images.value.length>=3){
			return false
		}
		upload(res => {
			images.value.push(res)
		})
	}
	const showShell = (index) => {
		uni.showActionSheet({
			itemList: ['预览', '删除'],
			success: function(res) {
				if (res.tapIndex == 0) {
					uni.previewImage({
						urls: images.value,
						current:index
					});
				}
				if (res.tapIndex == 1) {
					images.value.splice(index,1)
				}
				
			},
			fail: function(res) {
				console.log(res.errMsg);
			}
		});
	}
	let bok = true
	const submit = async () => {
		if(images.value.length==0){
			uni.showModal({
				title:'提示',
				content:'请上传图片'
			})
			return false
		}
		if(!form.value.content){
			uni.showModal({
				title:'提示',
				content:'请填写评价内容'
			})
			return false
		}
		if(!bok) return false
		bok = false
		form.value.picUrl = images.value.toString()
		
		const res = await evaluateSave(form.value)
		uni.showModal({
			title:'提示',
			content:'评价成功',
			showCancel:false,
			success: () => {
				uni.navigateBack()
			}
		})
		bok = true
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.title {
		display: block;
		margin-top: 79rpx;
		text-align: center;
		font-size: 30rpx;
		color: #16191B;
	}

	.starts {
		display: flex;
		margin: 43rpx 190rpx 50rpx;
		justify-content: space-between;

		image {
			width: 50rpx;
			height: 50rpx;
			display: block;

		}
	}

	.box {
		width: 630rpx;
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 0 auto;

		textarea {
			display: block;
			height: 200rpx;
		}

		.num {
			font-size: 28rpx;
			color: #A5A5A5;
			display: block;
			text-align: right;
		}

		.uploads {
			margin-top: 38rpx;
			border-top: 2rpx solid #F2F2F2;
			padding-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			
			.upload {
				width: 197rpx;
				height: 148rpx;
				display: block;
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
		border-radius: 28rpx;
		display: block;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		position: absolute;
		left: 55rpx;
		bottom: 100rpx;
	}
</style>